<template>
  <div class="vep-showcase">

    <!-- 项目展示区域 -->
    <div v-if="selectedProjectData" class="project-display">

      <!-- 轮播图展示 -->
      <el-card class="carousel-card">
        <div class="project-title">

          <div class="project-info">

          </div>
          <div class="total-result">
            <h2></h2>
            <span class="result-label">{{ selectedProjectData.vepName }}的VEP:</span>
            <span class="result-value">{{ convertToBillion(selectedProjectData.vepResult) }} {{ getUnitLabel(selectedProjectData.vepResult) }}</span>
          </div>
        </div>
        <div class="carousel-container">
          <el-carousel
              :interval="4000"
              height="480px"
              indicator-position="outside"
              @change="handleCarouselChange"
              ref="carouselRef"
          >
            <el-carousel-item
                v-for="(image) in projectImages"
                :key="image.id"
                @click="handleImageClick(image)"
                class="clickable-carousel-item"
            >
              <div class="carousel-item">
                <img :src="image.url" :alt="image.alt" class="carousel-image" />
                <div class="carousel-caption">
                  <h3>{{ image.description }} </h3>
                  <p>  核算年份: {{ selectedProjectData.year }}</p>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-table
            :data="tableData"
            style="width: 1000px; background-color: rgba(218, 27, 27, 0);"
            :header-cell-style="{ background: '#1c1c1c', color: '#c6cada',textAlign: 'center'  }"
            :cell-style="{ background: '#2d2d2d', color: '#c6cada',textAlign: 'center' }"
            class="custom-dark-table "
        >
          <el-table-column prop="area" label="项目面积" width="200"  >
            <template #default="{ row }">
              <div class="table-cell-content">
                <span class="area-text">{{ row.area }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="vep" label="VEP" width="200">
            <template #default="{ row }">
              <div class="table-cell-content">
                <span class="vep-value">{{ row.vepFormatted }} {{ row.vepUnit }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="provisioning" label="物质供给" width="200">
            <template #default="{ row }">
              <div class="table-cell-content">
                <span class="provisioning-value">{{ row.provisioningFormatted }} {{ row.provisioningUnit }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="regulating" label="调节服务" width="200">
            <template #default="{ row }">
              <div class="table-cell-content">
                <span class="regulating-value">{{ row.regulatingFormatted }} {{ row.regulatingUnit }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="cultural" label="文化服务" width="200">
            <template #default="{ row }">
              <div class="table-cell-content">
                <span class="cultural-value">{{ row.culturalFormatted }} {{ row.culturalUnit }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </div>

  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getVepShowcaseData } from '@/api/services/vepService'

// 工具函数：将万元转换为亿元，保留两位小数
const convertToBillion = (value) => {
  if (value === null || value === undefined || value === '') return '0.00'
  const numValue = parseFloat(value)
  if (isNaN(numValue)) return '0.00'

  if (numValue >= 10000) {
    // 大于等于1万，转换为亿元
    return (numValue / 10000).toFixed(2)
  } else {
    // 小于1万，保持万元单位
    return numValue.toFixed(2)
  }
}

// 工具函数：获取单位标签
const getUnitLabel = (value) => {
  if (value === null || value === undefined || value === '') return '万元'
  const numValue = parseFloat(value)
  if (isNaN(numValue)) return '万元'

  return numValue >= 10000 ? '亿元' : '万元'
}

// 响应式数据
const vepResults = ref([])
const selectedProject = ref(null)
const selectedProjectData = ref(null)
const loading = ref(false)
const carouselRef = ref(null)

// 计算属性
const projectOptions = computed(() => {
  return vepResults.value.map(item => ({
    id: item.id,
    vepName: item.vepName,
    vepCity: item.vepCity,
    vepDistrict: item.vepDistrict,
    vepTown: item.vepTown,
    year: item.year
  }))
})

const projectImages = computed(() => {
  if (!vepResults.value.length) return []

  return vepResults.value.map(item => ({
    id: item.id,
    url: item.imageUrl || 'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/vep-project/vep-project-default.jpg',
    title: item.vepName,
    // description: `${item.vepCity} - ${item.vepDistrict} - ${item.vepTown}`,
    description: item.vepTown,
    alt: item.vepName,
    projectData: item
  }))
})

const tableData = computed(() => {
  if (!selectedProjectData.value) return []

  return [{
    area: selectedProjectData.value.projectArea ? `${convertToBillion(selectedProjectData.value.projectArea)} 平方千米` : '暂无数据',
    vep: selectedProjectData.value.vepResult,
    vepUnit: getUnitLabel(selectedProjectData.value.vepResult),
    vepFormatted: convertToBillion(selectedProjectData.value.vepResult),
    provisioning: selectedProjectData.value.provisioningServices,
    provisioningUnit: getUnitLabel(selectedProjectData.value.provisioningServices),
    provisioningFormatted: convertToBillion(selectedProjectData.value.provisioningServices),
    regulating: selectedProjectData.value.regulatingServices,
    regulatingUnit: getUnitLabel(selectedProjectData.value.regulatingServices),
    regulatingFormatted: convertToBillion(selectedProjectData.value.regulatingServices),
    cultural: selectedProjectData.value.culturalServices,
    culturalUnit: getUnitLabel(selectedProjectData.value.culturalServices),
    culturalFormatted: convertToBillion(selectedProjectData.value.culturalServices)
  }]
})

// 方法
const fetchVepResults = async () => {
  loading.value = true
  try {
    const response = await getVepShowcaseData()
    vepResults.value = response.data.selected_projects || []
  } catch (error) {
    console.error('获取VEP结果失败:', error)
    ElMessage.error('获取VEP结果失败')
  } finally {
    loading.value = false
  }
}

const handleProjectChange = (projectId) => {
  selectedProjectData.value = vepResults.value.find(item => item.id === projectId) || null

  // 同步轮播图到对应项目
  if (carouselRef.value && projectId) {
    const projectIndex = projectImages.value.findIndex(img => img.id === projectId)
    if (projectIndex !== -1) {
      carouselRef.value.setActiveItem(projectIndex)
    }
  }
}

const handleCarouselChange = (index) => {
  // 轮播图自动切换时，同步更新选中的项目
  if (projectImages.value[index]) {
    const imageData = projectImages.value[index]
    selectedProject.value = imageData.id
    selectedProjectData.value = imageData.projectData
  }
}

const handleImageClick = (image) => {
  // 点击轮播图时，切换到对应项目
  selectedProject.value = image.id
  selectedProjectData.value = image.projectData
}

// 生命周期
onMounted(() => {
  fetchVepResults()
})

// 监听数据变化，自动选择第一个项目
watch(vepResults, (newResults) => {
  if (newResults.length > 0 && !selectedProject.value) {
    const firstProject = newResults[0]
    selectedProject.value = firstProject.id
    selectedProjectData.value = firstProject
  }
}, { immediate: true })
</script>

<style scoped>
.vep-showcase {
  padding: 20px;

}

.project-display {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-title-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.project-title {
  text-align: center;
  padding: 5px;
}

.project-title h2 {
  margin: 0 0 15px 0;
  font-size: 24px;
  font-weight: 600;
  color: white;
}

.project-info {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 14px;
  opacity: 0.9;

}

.total-result {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: bold;
  color: white;
}

.result-label {
  font-weight: 500;
}

.result-value {
  font-size: 24px;
  font-weight: 700;
  color: #ffd700;
}

.carousel-card {
  margin-bottom: 20px;
  background-color: rgba(218, 27, 27, 0);
  border: rgb(255, 255, 255, 0) 1px solid;
}

.carousel-container {
  padding: 20px;

}

.carousel-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-image {
  /*  width: 100%;*/
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #c6cada;
  padding: 15px;
  border-radius: 0 0 8px 8px;
}

.carousel-caption h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
}

.carousel-caption p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.click-hint {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.8;
  font-style: italic;
}

.clickable-carousel-item {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.clickable-carousel-item:hover {
  transform: scale(1.02);
}


/* 表格样式 */
.area-text {
  font-weight: 500;
  color: #c6cada;
}

.vep-value {
  font-weight: 600;
  color: #e6a23c;
}

.provisioning-value {
  font-weight: 600;
  color: #c6cada;
}

.regulating-value {
  font-weight: 600;
  color: #c6cada;
}

.cultural-value {
  font-weight: 600;
  color: #c6cada;
}

.table-cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .vep-showcase {
    padding: 10px;
  }

  .project-info {
    flex-direction: column;
    gap: 10px;
  }

  .total-result {
    flex-direction: column;
    gap: 5px;
  }
}




</style>
